import React, { useState } from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Typography,
  Box,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Checkbox,
  LinearProgress,
  Chip,
  Divider,
  Alert,
  IconButton,
  Avatar
} from '@mui/material';
import {
  Close as CloseIcon,
  EmojiEvents as TrophyIcon,
  Timer as TimerIcon
} from '@mui/icons-material';

function ChallengeDialog({ challenge, open, onClose, isParticipating, progress, onTaskComplete }) {
  const [completedTasks, setCompletedTasks] = useState([]);

  const handleTaskToggle = (taskIndex) => {
    const newCompletedTasks = [...completedTasks];
    const currentIndex = completedTasks.indexOf(taskIndex);

    if (currentIndex === -1) {
      newCompletedTasks.push(taskIndex);
    } else {
      newCompletedTasks.splice(currentIndex, 1);
    }

    setCompletedTasks(newCompletedTasks);
    onTaskComplete(challenge._id, newCompletedTasks);
  };

  if (!challenge) return null;

  return (
    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
      <DialogTitle sx={{ m: 0, p: 2, display: 'flex', alignItems: 'center' }}>
        <Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
          <Avatar sx={{ bgcolor: 'primary.main', mr: 2 }}>
            <TrophyIcon />
          </Avatar>
          <Typography variant="h6">{challenge.title}</Typography>
        </Box>
        <IconButton onClick={onClose}>
          <CloseIcon />
        </IconButton>
      </DialogTitle>

      <DialogContent dividers>
        <Box sx={{ mb: 3 }}>
          <Typography variant="body1" paragraph>
            {challenge.description}
          </Typography>
          
          <Box sx={{ display: 'flex', gap: 1, mb: 2 }}>
            <Chip
              icon={<TrophyIcon />}
              label={`${challenge.points} 积分`}
              color="primary"
            />
            <Chip
              icon={<TimerIcon />}
              label={challenge.duration}
              variant="outlined"
            />
          </Box>
        </Box>

        {isParticipating && (
          <Box sx={{ mb: 3 }}>
            <Typography variant="h6" gutterBottom>
              挑战进度
            </Typography>
            <LinearProgress 
              variant="determinate" 
              value={progress} 
              sx={{ height: 8, borderRadius: 4 }}
            />
            <Typography variant="body2" align="right" sx={{ mt: 1 }}>
              {progress}% 完成
            </Typography>
          </Box>
        )}

        <Typography variant="h6" gutterBottom>
          任务清单
        </Typography>
        <List>
          {challenge.tasks.map((task, index) => (
            <ListItem key={index} dense>
              <ListItemIcon>
                <Checkbox
                  edge="start"
                  checked={completedTasks.includes(index)}
                  onChange={() => handleTaskToggle(index)}
                  disabled={!isParticipating}
                />
              </ListItemIcon>
              <ListItemText
                primary={task.text}
                secondary={`完成可获得 ${task.points} 积分`}
              />
            </ListItem>
          ))}
        </List>

        <Divider sx={{ my: 2 }} />
        
        <Typography variant="h6" gutterBottom>
          完成标准
        </Typography>
        <Typography variant="body2" color="text.secondary" paragraph>
          1. 在规定时间内完成所有任务
        </Typography>
        <Typography variant="body2" color="text.secondary" paragraph>
          2. 每完成一个任务即可获得相应积分
        </Typography>
        <Typography variant="body2" color="text.secondary">
          3. 完成全部任务可获得额外奖励积分
        </Typography>
      </DialogContent>

      <DialogActions>
        <Button onClick={onClose}>
          {isParticipating ? '关闭' : '取消'}
        </Button>
        {!isParticipating && (
          <Button variant="contained" color="primary" onClick={onClose}>
            开始挑战
          </Button>
        )}
      </DialogActions>
    </Dialog>
  );
}

export default ChallengeDialog; 